import React from 'react';
import PropTypes from 'prop-types';
import { ConnectedRouter } from 'connected-react-router';
import { Switch, Route, Redirect } from 'react-router-dom';
import MyLoadable from 'components/MyLoadable';

const LoadableHome = MyLoadable({
  loader: () => import(/* webpackChunkName: 'home' */ '../Home'),
});

const LoadableAbout = MyLoadable({
  loader: () => import(/* webpackChunkName: 'about' */ '../About'),
});

export default function AppRouter(props) {
  return (
    <div>
      <ConnectedRouter history={props.history}>
        <Switch>
          <Route exact path="/" component={LoadableHome} />
          <Route exact path="/about" component={LoadableAbout} />
          <Redirect to="/" />
        </Switch>
      </ConnectedRouter>
    </div>
  );
}

AppRouter.propTypes = {
  history: PropTypes.object.isRequired,
};
